<script setup>
import {ElMessage} from "element-plus";

document.title = 'MMD模型资源管理中心 - 管理后台'
import {
  ArrowLeftBold,
  ArrowRightBold,
  ArrowDown,
  Box,
  Document,
  Key,
  SwitchButton,
  User,
  WindPower,
  Setting,
  Bell,
  Avatar,
  Brush,
  Refresh,
  Check
} from "@element-plus/icons-vue";
import {ref, onMounted, computed} from "vue";
import {useRoute} from "vue-router";
import Cookies from "js-cookie";

// 获取当前路由
const route = useRoute()

const isCollapse = ref(false)
const text = ref('收起菜单')
const currentUser = ref('')
const notifications = ref(3)

// 主题设置
const showThemeDialog = ref(false)
const showColorDialog = ref(false)
const currentTheme = ref('black-gold') // 默认黑金主题
const currentColor = ref('gold') // 默认金色配色

// 计算当前激活的菜单项
const activeMenu = computed(() => {
  const path = route.path
  // 移除开头的斜杠，匹配菜单项的 index
  return path.replace('/', '') || 'dashboard'
})

// 计算当前页面标题
const currentPageTitle = computed(() => {
  const menuItem = menuItems.find(item => item.index === activeMenu.value)
  return menuItem ? menuItem.title : '管理后台'
})

onMounted(() => {
  // 获取当前用户信息
  const username = Cookies.get('username') || localStorage.getItem('userName') || '管理员'
  currentUser.value = username
  
  // 初始化主题设置
  const savedTheme = localStorage.getItem('theme') || 'black-gold'
  const savedColor = localStorage.getItem('color') || 'gold'
  
  currentTheme.value = savedTheme
  currentColor.value = savedColor
  
  // 应用保存的主题
  applyTheme(savedTheme)
  // 先清除 data-color，保证干净状态
  document.documentElement.removeAttribute('data-color')
  // 如果不是 simple- 系列主题，应用配色
  if (!savedColor.startsWith('simple-')) {
    document.documentElement.setAttribute('data-color', savedColor)
  }
})

const unFoldAndFold = () => {
  isCollapse.value = !isCollapse.value
  if (isCollapse.value){
    text.value = '展开菜单'
  }else {
    text.value = '收起菜单'
  }
}

const logout = () => {
  localStorage.removeItem('token')
  localStorage.removeItem('user')
  localStorage.removeItem('userId')
  localStorage.removeItem('userName')
  localStorage.removeItem('userRole')
  Cookies.remove('token')
  Cookies.remove('username')
  ElMessage.success('退出成功!!')
  window.location.href = '/login'
}

const handleUserCommand = (command) => {
  switch (command) {
    case 'profile':
      ElMessage.info('个人资料功能开发中...')
      break
    case 'settings':
      ElMessage.info('系统设置功能开发中...')
      break
    case 'logout':
      logout()
      break
    default:
      break
  }
}

const handleSettingCommand = (command) => {
  switch (command) {
    case 'theme':
      showThemeDialog.value = true
      break
    case 'color':
      showColorDialog.value = true
      break
    case 'reset':
      resetTheme()
      break
    default:
      break
  }
}

// 应用主题
const applyTheme = (themeId) => {
  currentTheme.value = themeId
  // 清除旧属性，先移除配色避免残留覆盖
  document.documentElement.removeAttribute('data-color')
  document.documentElement.setAttribute('data-theme', themeId)
  localStorage.setItem('theme', themeId)
  forceRefreshCSS()
}

// 应用配色
const applyColor = (colorId) => {
  currentColor.value = colorId
  // simple-* 表示这是完整主题，直接作为 data-theme 应用并清除 data-color
  if (colorId.startsWith('simple-')) {
    document.documentElement.removeAttribute('data-color')
    document.documentElement.setAttribute('data-theme', colorId)
    localStorage.setItem('theme', colorId)
  } else {
    // 高级配色仅覆盖金色系变量，保持当前主题的黑色背景等
    document.documentElement.setAttribute('data-color', colorId)
    localStorage.setItem('color', colorId)
  }
  forceRefreshCSS()
}

// 强制刷新CSS
const forceRefreshCSS = () => {
  // 方法1：强制重绘整个页面
  const root = document.documentElement
  root.style.setProperty('--force-refresh', Date.now().toString())
  
  // 方法2：触发样式重新计算
  const style = document.createElement('style')
  style.textContent = `html { --refresh: ${Date.now()}; }`
  document.head.appendChild(style)
  
  // 方法3：延迟移除临时样式
  setTimeout(() => {
    document.head.removeChild(style)
  }, 100)
  
  // 方法4：强制重排
  document.body.offsetHeight
}

// 重置主题
const resetTheme = () => {
  document.documentElement.removeAttribute('data-color')
  applyTheme('black-gold')
  applyColor('gold')
  ElMessage.success('设置已重置为默认主题')
}

const menuItems = [
  {
    index: 'dashboard',
    icon: 'TrendCharts',
    title: '仪表板',
    description: '系统概览和统计'
  },
  {
    index: 'user',
    icon: 'User',
    title: '用户管理',
    description: '管理系统用户'
  },
  {
    index: 'model',
    icon: 'Box',
         title: '模型管理',
     description: '管理MMD模型资源'
  },
  {
    index: 'code',
    icon: 'Key',
    title: '授权管理',
    description: '管理访问权限'
  },
  
]

// 主题配置
const themeOptions = [
  {
    id: 'black-gold',
    name: '炫酷黑金',
    description: '经典黑金配色，高端大气',
    preview: 'bg-gradient-to-br from-gray-900 to-yellow-600',
    active: true
  },
  {
    id: 'emerald-green',
    name: '宝石青绿',
    description: '清新青绿配色，自然舒适',
    preview: 'bg-gradient-to-br from-emerald-800 to-teal-500',
    active: false
  },
  {
    id: 'simple-black',
    name: '简洁黑白',
    description: '简约黑白配色，经典永恒',
    preview: 'bg-gradient-to-br from-gray-900 to-gray-600',
    active: false
  }
]

// 配色主题配置
const colorOptions = [
  {
    id: 'gold',
    name: '金色',
    description: '奢华金色主题',
    color: '#d4af37',
    active: true
  },
  {
    id: 'red',
    name: '红色',
    description: '热情红色主题',
    color: '#dc3545',
    active: false
  },
  {
    id: 'blue',
    name: '蓝色',
    description: '科技蓝色主题',
    color: '#007bff',
    active: false
  },
  {
    id: 'green',
    name: '绿色',
    description: '自然绿色主题',
    color: '#28a745',
    active: false
  }
]

// 普通配色主题配置
const simpleColorOptions = [
  {
    id: 'simple-red',
    name: '红色主题',
    description: '简洁红色主题',
    color: '#dc3545',
    active: false
  },
  {
    id: 'simple-yellow',
    name: '黄色主题',
    description: '简洁黄色主题',
    color: '#ffc107',
    active: false
  },
  {
    id: 'simple-blue',
    name: '蓝色主题',
    description: '简洁蓝色主题',
    color: '#007bff',
    active: false
  },
  {
    id: 'simple-green',
    name: '绿色主题',
    description: '简洁绿色主题',
    color: '#28a745',
    active: false
  }
]
</script>

<template>
  <div class="admin-layout">
    <!-- 侧边栏 -->
    <div class="sidebar" :class="{ 'collapsed': isCollapse }">
      <!-- Logo区域 -->
      <div class="sidebar-header">
        <div class="logo-container">
          <div class="logo-icon">
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
              <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
              <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
            </svg>
          </div>
          <div class="logo-text" v-show="!isCollapse">
                         <h3 class="system-name">MMD模型中心</h3>
            <p class="system-version">v2.0</p>
          </div>
        </div>
      </div>

      <!-- 菜单区域 -->
      <div class="sidebar-menu">
        <el-menu
            :default-active="activeMenu"
            class="el-menu-vertical"
            :collapse="isCollapse"
            router
            background-color="transparent"
            text-color="var(--text-secondary)"
            active-text-color="var(--gold-primary)"
        >
          <!-- 折叠按钮 -->
          <div class="menu-toggle" @click="unFoldAndFold">
            <el-icon v-if="isCollapse"><ArrowRightBold /></el-icon>
            <el-icon v-if="!isCollapse"><ArrowLeftBold /></el-icon>
            <span v-show="!isCollapse">{{ text }}</span>
          </div>

          <!-- 菜单项 -->
          <el-menu-item 
            v-for="item in menuItems" 
            :key="item.index"
            :index="item.index"
            class="menu-item"
          >
            <el-icon><component :is="item.icon" /></el-icon>
            <template #title>
              <div class="menu-item-content">
                <span class="menu-title">{{ item.title }}</span>
                <span v-show="!isCollapse" class="menu-description">{{ item.description }}</span>
              </div>
            </template>
          </el-menu-item>


        </el-menu>
      </div>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 顶部导航栏 -->
      <div class="top-navbar">
        <div class="navbar-left">
          <div class="breadcrumb">
            <span class="breadcrumb-item">MMD模型资源管理中心</span>
            <span class="breadcrumb-separator">/</span>
            <span class="breadcrumb-current">{{ currentPageTitle }}</span>
          </div>
        </div>
        
        <div class="navbar-right">
          <!-- 通知按钮 -->
          <div class="nav-item notification-item">
            <el-badge :value="notifications" class="notification-badge">
              <el-button circle class="nav-button">
                <el-icon><Bell /></el-icon>
              </el-button>
            </el-badge>
          </div>

          <!-- 设置按钮 -->
          <div class="nav-item">
            <el-dropdown trigger="click" @command="handleSettingCommand">
              <el-button circle class="nav-button">
                <el-icon><Setting /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu class="settings-dropdown-menu">
                  <el-dropdown-item command="theme">
                    <el-icon><Brush /></el-icon>
                    <span>主题设置</span>
                  </el-dropdown-item>
                  <el-dropdown-item command="color">
                    <el-icon><Palette /></el-icon>
                    <span>配色主题</span>
                  </el-dropdown-item>
                  <el-dropdown-item divided command="reset">
                    <el-icon><Refresh /></el-icon>
                    <span>重置设置</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>

          <!-- 用户信息 -->
          <div class="nav-item user-info">
            <el-dropdown trigger="hover" @command="handleUserCommand">
              <div class="user-dropdown-trigger">
                <div class="user-avatar">
                  <el-avatar :size="32" class="avatar">
                    <el-icon><Avatar /></el-icon>
                  </el-avatar>
                </div>
                <div class="user-details" v-show="!isCollapse">
                  <span class="username">{{ currentUser }}</span>
                  <span class="user-role">系统管理员</span>
                </div>
                <el-icon class="dropdown-arrow"><ArrowDown /></el-icon>
              </div>
              <template #dropdown>
                <el-dropdown-menu class="user-dropdown-menu">
                  <el-dropdown-item command="profile">
                    <el-icon><User /></el-icon>
                    <span>个人资料</span>
                  </el-dropdown-item>
                  <el-dropdown-item command="settings">
                    <el-icon><Setting /></el-icon>
                    <span>系统设置</span>
                  </el-dropdown-item>
                  <el-dropdown-item divided command="logout">
                    <el-icon><SwitchButton /></el-icon>
                    <span>退出登录</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </div>

      <!-- 页面内容 -->
      <div class="page-content">
        <div class="content-wrapper">
          <router-view/>
        </div>
      </div>
    </div>

    <!-- 主题设置对话框 -->
    <el-dialog
      v-model="showThemeDialog"
      title="主题设置"
      width="600px"
      class="theme-dialog"
    >
      <div class="theme-options">
        <div
          v-for="theme in themeOptions"
          :key="theme.id"
          class="theme-option"
          :class="{ active: currentTheme === theme.id }"
          @click="applyTheme(theme.id)"
        >
          <div class="theme-preview" :class="theme.preview"></div>
          <div class="theme-info">
            <h4 class="theme-name">{{ theme.name }}</h4>
            <p class="theme-description">{{ theme.description }}</p>
          </div>
          <div class="theme-check" v-if="currentTheme === theme.id">
            <el-icon><Check /></el-icon>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showThemeDialog = false">取消</el-button>
          <el-button type="primary" @click="showThemeDialog = false">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 配色主题对话框 -->
    <el-dialog
      v-model="showColorDialog"
      title="配色主题"
      width="700px"
      class="color-dialog"
    >
      <div class="color-sections">
        <!-- 高级配色主题 -->
        <div class="color-section">
          <h3 class="section-title">高级配色主题</h3>
          <div class="color-options">
            <div
              v-for="color in colorOptions"
              :key="color.id"
              class="color-option"
              :class="{ active: currentColor === color.id }"
              @click="applyColor(color.id)"
            >
              <div class="color-preview" :style="{ backgroundColor: color.color }"></div>
              <div class="color-info">
                <h4 class="color-name">{{ color.name }}</h4>
                <p class="color-description">{{ color.description }}</p>
              </div>
              <div class="color-check" v-if="currentColor === color.id">
                <el-icon><Check /></el-icon>
              </div>
            </div>
          </div>
        </div>

        <!-- 普通配色主题 -->
        <div class="color-section">
          <h3 class="section-title">普通配色主题</h3>
          <div class="color-options">
            <div
              v-for="color in simpleColorOptions"
              :key="color.id"
              class="color-option"
              :class="{ active: currentColor === color.id }"
              @click="applyColor(color.id)"
            >
              <div class="color-preview" :style="{ backgroundColor: color.color }"></div>
              <div class="color-info">
                <h4 class="color-name">{{ color.name }}</h4>
                <p class="color-description">{{ color.description }}</p>
              </div>
              <div class="color-check" v-if="currentColor === color.id">
                <el-icon><Check /></el-icon>
              </div>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showColorDialog = false">取消</el-button>
          <el-button type="primary" @click="showColorDialog = false">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.admin-layout {
  display: flex;
  height: 100vh;
  background: var(--gradient-dark);
}

/* 侧边栏样式 */
.sidebar {
  width: 280px;
  background: var(--gradient-card);
  border-right: 1px solid var(--border-gold);
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  box-shadow: 2px 0 10px var(--shadow-dark);
}

.sidebar.collapsed {
  width: 64px;
}

.sidebar-header {
  padding: 1.5rem;
  border-bottom: 1px solid var(--border-dark);
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.logo-icon {
  width: 40px;
  height: 40px;
  background: var(--gradient-gold);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-black);
  flex-shrink: 0;
}

.logo-icon svg {
  width: 24px;
  height: 24px;
}

.logo-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.system-name {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--gold-primary);
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.system-version {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 菜单样式 */
.sidebar-menu {
  flex: 1;
  padding: 1rem 0;
  overflow-y: auto;
}

/* 确保菜单项在折叠状态下正确显示 */
.sidebar.collapsed .menu-item {
  padding: 0.75rem 0.5rem !important;
  justify-content: center !important;
}

.sidebar.collapsed .menu-item .el-icon {
  margin-right: 0 !important;
}

.sidebar.collapsed .menu-item-content {
  display: none !important;
}

.menu-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.3s ease;
  border-bottom: 1px solid var(--border-dark);
  margin-bottom: 1rem;
}

.menu-toggle:hover {
  color: var(--gold-primary);
  background: var(--secondary-black);
}

.menu-toggle .el-icon {
  font-size: 1.2rem;
}

.menu-item {
  margin: 0.5rem 1rem;
  border-radius: 8px;
  transition: all 0.3s ease;
  height: auto !important;
  min-height: 60px;
  padding: 0.75rem 1rem !important;
}

.menu-item:hover {
  background: var(--secondary-black) !important;
  transform: translateX(5px);
}

.menu-item.is-active {
  background: var(--gradient-gold) !important;
  color: var(--primary-black) !important;
  font-weight: 600;
}

.menu-item-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  overflow: hidden;
  width: 100%;
}

.menu-title {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.menu-description {
  font-size: 0.75rem;
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.1;
  margin-top: 0.25rem;
  display: block;
}



/* 主内容区域 */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 顶部导航栏 */
.top-navbar {
  height: 70px;
  background: var(--gradient-card);
  border-bottom: 1px solid var(--border-gold);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  box-shadow: 0 2px 10px var(--shadow-dark);
}

.navbar-left {
  display: flex;
  align-items: center;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.breadcrumb-item {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.breadcrumb-separator {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.breadcrumb-current {
  color: var(--gold-primary);
  font-weight: 600;
  font-size: 0.9rem;
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-button {
  background: transparent !important;
  border: 1px solid var(--border-dark) !important;
  color: var(--text-secondary) !important;
  transition: all 0.3s ease;
}

.nav-button:hover {
  background: var(--secondary-black) !important;
  border-color: var(--gold-primary) !important;
  color: var(--gold-primary) !important;
  transform: translateY(-2px);
}

.notification-badge :deep(.el-badge__content) {
  background: #dc3545 !important;
  border: 2px solid var(--secondary-black) !important;
}

.user-info {
  padding: 0;
  background: transparent;
  border-radius: 8px;
  border: none;
  transition: all 0.3s ease;
}

.user-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--secondary-black);
  border-radius: 8px;
  border: 1px solid var(--border-dark);
  cursor: pointer;
  transition: all 0.3s ease;
}

.user-dropdown-trigger:hover {
  border-color: var(--gold-primary);
  transform: translateY(-2px);
}

.dropdown-arrow {
  color: var(--text-muted);
  font-size: 0.8rem;
  transition: transform 0.3s ease;
}

.user-dropdown-trigger:hover .dropdown-arrow {
  transform: rotate(180deg);
  color: var(--gold-primary);
}

.user-avatar {
  display: flex;
  align-items: center;
}

.avatar {
  background: var(--gradient-gold) !important;
  color: var(--primary-black) !important;
}

.user-details {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  overflow: hidden;
}

.username {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-role {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 页面内容 */
.page-content {
  flex: 1;
  overflow: hidden;
  padding: 2rem;
}

.content-wrapper {
  height: 100%;
  overflow-y: auto;
  background: var(--gradient-card);
  border-radius: 12px;
  border: 1px solid var(--border-gold);
  padding: 2rem;
  box-shadow: 0 8px 24px var(--shadow-dark);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    z-index: 1000;
    transform: translateX(-100%);
  }
  
  .sidebar.collapsed {
    transform: translateX(0);
  }
  
  .top-navbar {
    padding: 0 1rem;
  }
  
  .page-content {
    padding: 1rem;
  }
  
  .content-wrapper {
    padding: 1rem;
  }
  
  .user-details {
    display: none;
  }
}

/* 动画效果 */
.sidebar {
  animation: slideInLeft 0.3s ease-out;
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.content-wrapper {
  animation: fadeInUp 0.6s ease-out;
}

/* 设置下拉菜单样式 */
:deep(.settings-dropdown-menu) {
  background: var(--gradient-card) !important;
  border: 1px solid var(--border-gold) !important;
  box-shadow: 0 8px 24px var(--shadow-dark) !important;
}

:deep(.settings-dropdown-menu .el-dropdown-menu__item) {
  color: var(--text-secondary) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.75rem 1rem !important;
}

:deep(.settings-dropdown-menu .el-dropdown-menu__item:hover) {
  background: var(--secondary-black) !important;
  color: var(--gold-primary) !important;
}

/* 用户下拉菜单样式 */
:deep(.user-dropdown-menu) {
  background: var(--gradient-card) !important;
  border: 1px solid var(--border-gold) !important;
  box-shadow: 0 8px 24px var(--shadow-dark) !important;
}

:deep(.user-dropdown-menu .el-dropdown-menu__item) {
  color: var(--text-secondary) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.75rem 1rem !important;
}

:deep(.user-dropdown-menu .el-dropdown-menu__item:hover) {
  background: var(--secondary-black) !important;
  color: var(--gold-primary) !important;
}

:deep(.user-dropdown-menu .el-dropdown-menu__item.is-disabled) {
  color: var(--text-muted) !important;
  background: transparent !important;
}

/* 主题设置对话框样式 */
:deep(.theme-dialog .el-dialog) {
  background: var(--gradient-card) !important;
  border: 1px solid var(--border-gold) !important;
}

:deep(.theme-dialog .el-dialog__header) {
  background: var(--secondary-black) !important;
  border-bottom: 1px solid var(--border-gold) !important;
}

:deep(.theme-dialog .el-dialog__title) {
  color: var(--gold-primary) !important;
}

.theme-options {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.theme-option {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--secondary-black);
  border: 2px solid var(--border-dark);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.theme-option:hover {
  border-color: var(--gold-primary);
  transform: translateY(-2px);
}

.theme-option.active {
  border-color: var(--gold-primary);
  background: var(--gradient-card);
}

.theme-preview {
  width: 60px;
  height: 40px;
  border-radius: 6px;
  flex-shrink: 0;
}

.theme-info {
  flex: 1;
}

.theme-name {
  color: var(--text-primary);
  margin: 0 0 0.25rem 0;
  font-size: 1rem;
  font-weight: 600;
}

.theme-description {
  color: var(--text-muted);
  margin: 0;
  font-size: 0.85rem;
}

.theme-check {
  color: var(--gold-primary);
  font-size: 1.2rem;
}

/* 配色主题对话框样式 */
:deep(.color-dialog .el-dialog) {
  background: var(--gradient-card) !important;
  border: 1px solid var(--border-gold) !important;
}

:deep(.color-dialog .el-dialog__header) {
  background: var(--secondary-black) !important;
  border-bottom: 1px solid var(--border-gold) !important;
}

:deep(.color-dialog .el-dialog__title) {
  color: var(--gold-primary) !important;
}

.color-sections {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.color-section {
  border-bottom: 1px solid var(--border-dark);
  padding-bottom: 1rem;
}

.color-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.section-title {
  color: var(--gold-primary);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 1rem 0;
}

.color-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.color-option {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--secondary-black);
  border: 2px solid var(--border-dark);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.color-option:hover {
  border-color: var(--gold-primary);
  transform: translateY(-2px);
}

.color-option.active {
  border-color: var(--gold-primary);
  background: var(--gradient-card);
}

.color-preview {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid var(--border-dark);
}

.color-info {
  flex: 1;
}

.color-name {
  color: var(--text-primary);
  margin: 0 0 0.25rem 0;
  font-size: 0.9rem;
  font-weight: 600;
}

.color-description {
  color: var(--text-muted);
  margin: 0;
  font-size: 0.8rem;
}

.color-check {
  color: var(--gold-primary);
  font-size: 1.2rem;
}

.dialog-footer {
  text-align: right;
}

/* Element Plus 组件样式覆盖 */
:deep(.el-menu) {
  border-right: none !important;
}

:deep(.el-menu-item) {
  height: auto !important;
  min-height: 50px !important;
  line-height: 1.5 !important;
  margin: 0.25rem 0 !important;
  padding: 0.75rem 1rem !important;
  display: flex !important;
  align-items: center !important;
}

:deep(.el-menu-item .el-icon) {
  margin-right: 0.75rem !important;
  font-size: 1.1rem !important;
  flex-shrink: 0 !important;
}

:deep(.el-menu-item .el-menu-item__title) {
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
</style>